<template lang="html">
  <div class="goods_box">
    <ul class="goods_main">
      <li class="shjiqian">
        <img :src="main.thumb" :alt="main.title">
        <h2>{{main.title}}</h2>
        <p>{{main.price}}</p>
      </li>
      <li class="zhong">
        <img src="../../../assets/img/banner/shengji.png" height="366" width="87">
      </li>
      <li class="shhun">
        <img :src="main.sp_thumb" :alt="main.sp_title">
        <h2>{{main.sp_title}}</h2>
        <p>{{main.sp_price}}</p>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
  props:["main"],
  data () {
    return {}
  },
  methods:{

  },
  components:{

  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.goods_box{
  width: 100vw;
  .goods_main{
    width: @width1;
    margin: 0 auto;
    color: @color1;
    font-size: @h3_font_size;
    overflow: hidden;
    zoom:1;
    position: relative;
    li{
      float: left;
      height: 48.666vw;
    }
    .shjiqian,.shhun{
      width: 39.5vw;
      background-color: @color;
      img{
        width: 100%;
        height: 32vw;
      }
      h2{
        margin-top: 2vw;
        margin-bottom: 2vw;
        width: 100%;
        .font_space(1);
        line-height: 5vw;
      }
      p{
        width: 100%;
        .font_space(1);
        line-height: 5vw;
      }
    }
    .zhong{
      width: 11vw;
      z-index: 10;
      img{
        width: 100%;
        height: 48.666vw;
      }
    }
    .shhun{
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
    }
  }
}

</style>